<template>
    <div class="w-full flex md:h-450 bg-footer-bg justify-center overflow-hidden relative">
        <div class="2xl:w-3/5 xl:w-4/5 md:w-full flex flex-col px-5 lg:px-0">
            <div>
                <div class="text-2xl pt-8 pl-3">{{ topicName.value }}的问与答</div>
                <Hr />
            </div>
            <div class="flex md:justify-around md:flex-row flex-col items-center">
                <div class="flex flex-col justify-center relative">
                    <div
                        class="text-4xl font-medium mb-3 md:block flex justify-center tracking-widest mt-5"
                    >{{ topicName.value }}的问与答</div>
                    <div
                        class="text-lg tracking-wide mb-3 md:block flex justify-center"
                    >关于{{ topicName.value }}你所需要知道的一切内容</div>
                    <div class="md:block flex justify-center">
                        <SearchBar placeholder="在文章中搜索主题" :myStyle="myStyle" :hasResult="false" />
                    </div>
                    <a
                        class="flex text-link items-center cursor-pointer mb-5 md:absolute  top-40 md:justify-start justify-center"
                        @click="getContext"
                    >
                        <div class="text-xl">目录</div>
                        <div
                            class="border-2 ml-1 relative rounded-full inline-block w-5 h-5 border-link " 
                        >
                            <div class="cross absolute text-lg">+</div>
                        </div>
                    </a>
                </div>
                <div class="flex flex-col justify-center items-center h-full">
                    <img
                        class="md:h-52 md:my-10 mb-5 rounded shadow-lg"
                        src="https://note.youdao.com/yws/api/personal/file/WEB54bf3d4758dd75de6a1155fa99f7e404?method=download&shareKey=d066fea376841ab3552ba4e3f103267e"
         
                    />
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import Hr from "./smallComs/hr.vue";
import SearchBar from "./smallComs/searchBar.vue";
import { computed, ref, watch } from 'vue'
import { useRoute } from "vue-router";
import { params, context } from "@utils/store";
const route = useRoute()

function getContext() {
    context.flag = !context.flag
}

watch(route, () => {
    params.topic = route.params.topic as string
})

const topicName = computed(() => {
    if (params.topic === 'sleep') {
        return ref('失眠')
    } else if (params.topic === 'xuanyun') {
        return ref('眩晕')
    } else {
        return ref('皮肤病')
    }
})
const myStyle = {
    containerStyle: 'relative mb-5',
    iconStyle: 'bg-small-search w-5 h-5 bg-no-repeat lg:mt-1 mt-0.5 ml-3 bg-center bg-contain absolute top-1/2 transform -translate-y-1/2',
    inputStyle: 'lg:w-400 w-350 h-8 outline-none text-sm tracking-wider text-gray-700 pl-10 border shadow-sm shadow-inner '
}
</script>
<style lang="scss" scoped>

    .cross {
        top: -6.7px;
        left: 2.3px;
        font-weight: 500;
    }

</style>